<template>
  <header>
    <div class="container">
      <nav class="header-wrap">
        <img src="../assets/logo.png" alt="logo">
        <ul>
          <li v-for="item in navList" 
            :key="item.enName" 
            :class="{'active': active == item.enName}" 
            @click="onClick(item.enName)"
          >
            {{item.name}}
          </li>
        </ul>
      </nav>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      active: 'home',
      navList: [
        {name: '首页', enName: 'home'},
        {name: '产品', enName: 'product'},
        {name: '文章', enName: 'article'},
        {name: '联系我们', enName: 'contact'}
      ]
    }
  },
  methods: {
    onClick(enName) {
      this.active = enName;
      this.$emit('click', 'vue-' + enName)
    }
  }
}
</script>

<style>
.header-wrap li.active {
  color: #000;
  border-bottom: 1px solid #888;
}
</style>